// 会员列表页面

import React, {Component} from 'react';
import {DeviceEventEmitter,StatusBar, Text, View,Image,TouchableNativeFeedback, TouchableWithoutFeedback, ScrollView, TouchableOpacity, StyleSheet, TextInput,FlatList} from 'react-native';
import styles, {mainBackgroundColor, white} from "../../../style/global";
import {connect} from "react-redux";
import memberActions from '../../../store/actions/member';
import {bindActionCreators} from 'redux';
import {Actions} from "react-native-router-flux";
import {fen_to_yuan} from "../../../utils";


class memberPage extends Component{
    constructor(props){
        super(props);
        //当前页
        this.page = 1
        //状态
        this.state = {
            searchText:'' ,//搜索框内容
            //加载更多
            isLoadMore:false,

        };
        //在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行绑定操作
        //否则this的指向不对
        //像下面这行代码一样，在constructor中使用bind是其中一种做法（还有一些其他做法，如使用箭头函数等）

    }
    componentDidMount(){
        let {memberAction} = this.props;
        memberAction.getUserList(1,'','');
        this.listener = DeviceEventEmitter.addListener('isLoadMore',(isLoadMore) => {
            this.setState({
                isLoadMore:isLoadMore
            })
        })

    }
    componentWillUnmount() {
        this.listener.remove();
    }
    //自己定义的方法需要_加方法名
    //加载更多
    _onLoadMore(){
        if(this.state.isLoadMore){
            this.page = this.page + 1;
            let {memberAction} = this.props;
            memberAction.getUserList(this.page,this.state.searchText,'');
        }
    }
    //会员列表渲染
    _renderVipList(rowData,index) {
        return(
            <TouchableNativeFeedback onPress={() => this._jumpTypeDetail(rowData.user_id)}>
                <View style={style.listItem}>
                    <Text numberOfLines={1} ellipsizeMode='tail' style={[style.listItemText]}>
                        {rowData.no || '没有卡号呀'}

                    </Text>
                    <Text style={[style.listItemText]}>
                        {rowData.nick_name}
                    </Text>
                    <Text style={[style.listItemText]}>
                        {rowData.birthday}
                    </Text>
                    <Text style={[style.listItemText]}>
                        {rowData.mobile}
                    </Text>
                    <Text style={[style.listItemText, style.flex1]}>
                        {fen_to_yuan(rowData.balance)}
                    </Text>
                    <Text style={[style.listItemText, style.flex1]}>
                        {rowData.point}
                    </Text>
                    <Text style={[style.listItemText, style.flex1]}>
                        {rowData.shop_user.shop_name}
                    </Text>
                </View>
            </TouchableNativeFeedback>
        )
    }

    //点击添加会员跳到新增会员
    _jumpDetail(){
        Actions.push('MemberDetailPage',{
            type:'add'
        })
    }
    //点击跳到会员详情页去
    _jumpTypeDetail(user_id){
        Actions.push('MemberDetailPage',{
            type:'detail',
            user_id:user_id
        })
    }
    //点击搜索按钮搜索
    _searchVip(){
        let {memberAction} = this.props;
        memberAction.getUserList(1,this.state.searchText,'');
    }
    //创建空布局
    _createEmptyView(){
        return (
            <View style={{height:'100%', alignItems:'center', justifyContent:'center',paddingVertical: 20}}>
                <Text style={{fontSize:16}}>
                    暂无列表数据!!!
                </Text>
            </View>
        );
    }
    render() {
        let{memberState} = this.props;
        return (
            <View>
                <StatusBar hidden={true}/>
                <View style={style.search}>
                    <TextInput
                        style={style.searchInput}
                        onChangeText={(searchText) => this.setState({searchText})}
                    />
                    <TouchableWithoutFeedback onPress={() => {this._searchVip()}}>
                        <View>
                            <Text style={style.searchText}>搜索</Text>
                        </View>
                    </TouchableWithoutFeedback>

                    <TouchableWithoutFeedback onPress={() => {this._jumpDetail()}}>
                        <View>
                            <Text style={style.addBtn}>添加会员</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
                <View style={style.list}>
                    <View style={style.listItem}>
                        <Text style={[style.listItemText, style.titleColor]}>
                            会员卡号
                        </Text>
                        <Text style={[style.listItemText, style.titleColor]}>
                            姓名
                        </Text>
                        <Text style={[style.listItemText, style.titleColor]}>
                            生日
                        </Text>
                        <Text style={[style.listItemText, style.titleColor]}>
                            手机号
                        </Text>
                        <Text style={[style.listItemText, style.titleColor, style.flex1]}>
                            余额
                        </Text>
                        <Text style={[style.listItemText, style.titleColor, style.flex1]}>
                            积分
                        </Text>
                        <Text style={[style.listItemText, style.titleColor, style.flex1]}>
                            所属门店
                        </Text>
                    </View>
                    <View>
                        <FlatList
                            style={{height: 500}}
                        keyExtractor={(item, index) => index.toString()}
                        data={memberState.userList}
                        renderItem={({item,index}) => this._renderVipList(item,index)}
                        onEndReached = {()=> this._onLoadMore()}
                        onEndReachedThreshold={0.1}
                        extraData={memberState.userList}
                            ListEmptyComponent={this._createEmptyView}
                        >
                        </FlatList>

                    </View>

                </View>

            </View>
        )
    }
}

const style = StyleSheet.create({
    search: {
        height: '13%',
        paddingHorizontal: 30,
        flexDirection: 'row',
        alignItems: 'center',
    },
    searchInput: {
        width: 320,
        backgroundColor: white,
        paddingHorizontal: 10,
        height: 44,

    },
    searchText: {
        width: 70,
        textAlign: 'center',
        lineHeight: 44,
        backgroundColor: mainBackgroundColor,
        color: white
    },
    addBtn: {
        width: 150,
        textAlign: 'center',
        lineHeight: 44,
        backgroundColor: mainBackgroundColor,
        color: white,
        borderRadius: 4,
        marginLeft: 60
    },
    list: {
        height: '87%',
        backgroundColor: white,
        paddingHorizontal: 30
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 15,
        borderBottomWidth: 1,
        borderColor: '#F0F0F5'
    },
    listItemText: {
        flex: 2,
        fontSize: 14,
        color: '#4A4A4A'
    },
    titleColor: {
        color: '#909090'
    },
    flex1: {
        flex: 1.5
    },
});
/*const style = StyleSheet.create({
    container: {
        backgroundColor: 'white',
    },
    headView:{
        width:width,
        height:100,
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center'
    },
    footerView:{
        width:width,
        height:100,
        backgroundColor:'yellow',
        justifyContent:'center',
        alignItems:'center'
    },
    itemImages:{
        width:120,
        height:120,
        resizeMode:'stretch'
    },
});*/

export default connect(state =>({
    memberState: state.member
}),dispatch =>({
    memberAction: bindActionCreators(memberActions,dispatch)
}))(memberPage);
